<template>
  <PageLayout>
    <!-- <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template> -->
    <div class="table-box">
      <div class="head-box">
        <div class="title">游戏类型管理</div>
        <a-space :size="16">
          <a-button type="primary" @click="edit()">新建</a-button>
        </a-space>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="postGameClassifyPage"  -->
        <BasicTable ref="tableRef" :columns="columns" :query-params="queryData" :apiFetch="postGameClassifyPage">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'coverUrl'">
              <a-image :height="50" :width="50" :src="record.coverUrl+'?compress=true&scale=0.6&disposition=inline'" />
            </template>
            <template v-if="column.key === 'action'">
              <a-space class="space-btn--box" :size="10">
                <a class="btn" @click="edit(record)">编辑</a>
                <a class="btn" @click="remove(record)">删除</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
  </PageLayout>
</template>

<script name="type-list" setup>
import {
  postGameClassifyPage,
  postGameClassifyDelete,
  postClientUserExport,
  postClientUserUpdateStatus,
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    username: "2121",
  }))
);
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "游戏类型-繁體中文",
    dataIndex: "nameTw",
    key: "nameTw",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "游戏类型-Français",
    dataIndex: "nameFr",
    key: "nameFr",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "游戏类型-Deutsch",
    dataIndex: "nameDe",
    key: "nameDe",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "游戏类型-Español",
    dataIndex: "nameSa",
    key: "nameSa",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "游戏类型-English",
    dataIndex: "nameUs",
    key: "nameUs",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "游戏类型-日本語",
    dataIndex: "nameJp",
    key: "nameJp",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "游戏类型-Italiano",
    dataIndex: "nameIt",
    key: "nameIt",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "游戏类型封面",
    dataIndex: "coverUrl",
    key: "coverUrl",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "排序",
    dataIndex: "sort",
    key: "sort",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "是否云游戏",
    dataIndex: "cloudGameFlag",
    key: "cloudGameFlag",
    width: "200px",
    ellipsis: true,
    customRender: ({ record }) => `${record.cloudGameFlag == 0 ? "否" : "是"}`,
  },
  {
    title: "关联游戏数量",
    dataIndex: "gameNum",
    key: "gameNum",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: "200px",
    ellipsis: true,
  },

  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 200,
  },
];

const edit = (record) => {
  router.push({
    path: "/type/edit",
    query: {
      id: record?.id,
    },
  });
};

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const toDetail = (record) => {
  router.push({
    path: "/feedback/detail",
    query: {
      id: record?.id,
    },
  });
};

const remove = ({ id }) => {
  comfirmModal({
    content: "确认删除该游戏类型",
    onOk() {
      postGameClassifyDelete({ id }).then(() => {
        message.success("删除成功");
        tableRef.value.fetch();
      });
    },
  });
};

const importFile = () => {
  if (!tableRef.value.data?.length) {
    message.error("暂无数据");
    return;
  }
  const params = {};

  for (let key in queryData) {
    params[key] = queryData[key];
  }
  postClientUserExport(params).then((res) => {
    message.success("导出成功");
  });
};
</script>

<style lang="less" scoped></style>
